<template>
	<view class="issus">
		<view class="issus_top">
			<view class="img">
				<view class="img_t"></view>
				<view class="img_c"></view>
			</view>
			<view class="issus_c">
				<template v-for="(item,index) in items">
					<view class="bgc" :key='item.id' @click="issus(item)">
						<view class="" style="width: 100%;text-align: center;height: 80rpx;margin-top: 15px;">
							<image style="width: 80rpx;height: 80rpx;" :src='item.img'></image>
						</view>
						<text style="color: #fff;font-size: 14rpx;">{{item.title}}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						id: 1,
						title: '安全',
						img: require('../../../src/imgs/anquana.png')
					},
					{
						id: 2,
						title: '质量',
						img: require('../../../src/imgs/anquang.png')
					},
					{
						id: 3,
						title: '设计',
						img: require('../../../src/imgs/anquand.png'),
						path:'/pages/statistics/technology/design/design'
						
					}, {
						id: 4,
						title: '档案',
						img: require('../../../src/imgs/anquanb.png')
					}
				]
			}
		},
		methods: {
			issus(e) {
			  if(e.id==3){
				  uni.navigateTo({
				  	url: e.path
				  })
			  }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.issus {
		width: 100%;
		height: 100%;

		.issus_top {
			width: 100%;
			height: 100%;

			.img {
				width: 100%;
				height: 280rpx;
				background-color: #2461FA;

				.img_t {
					width: 100%;
					height: 50rpx;
					background: url(../../../src/imgs/anquanf.png)no-repeat;
					background-position: center center;
					background-size: 116%;
				}

				.img_c {
					width: 100%;
					height: 258rpx;
					background: url(../../../src/imgs/anquane.png)no-repeat;
					background-position: center center;
					background-size: 117%;
				}
			}

			.issus_c {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				background-color: #fff;
				border-top-left-radius: 35rpx;
				border-top-right-radius: 35rpx;
				padding: 19px 16px 29px 20px;

				.bgc {
					width: 45%;
					display: flex;
					justify-content: center;
					flex-wrap: wrap;
					padding-top: 20rpx;
					height: 200rpx;
					background: url(../../../src/imgs/anquanc.png)no-repeat;
					background-position: center center;
					background-size: 95%;
				}
			}

		}
	}
</style>
